<!-- 活动 -->
<template>
  <div class="index-container">
    <div class="header-box">
      <TabsList
        :tabsList="tabsList"
        :activeItem="active"
        @click="OnTabsChange"
      />
      <Avater></Avater>
    </div>
    <div class="activity-main">
      <van-list
        v-model:loading="loading"
        finished-text="没有更多了"
        :finished="finished"
        :immediate-check="true"
        @load="onLoad"
      >
        <div v-if="active == 1">
          <div
            class="activity-item"
            :key="item.id"
            v-for="(item, index) in dynamicData"
          >
            <Activivty
              :itemData="item"
              @UnlockSuccess="UnlockSuccess($event, index)"
            />
          </div>
        </div>
        <div v-if="active == 0">
          <div
            class="activity-item"
            :key="item.id"
            v-for="(item, index) in dynamicData"
          >
            <Activivty
              :itemData="item"
              @UnlockSuccess="UnlockSuccess($event, index)"
            />
          </div>
        </div>
        <div v-if="active == 2">
          <div class="photo-list">
            <div class="photo-list-left">
              <template v-for="item in goodsListLeft" :key="item.id">
                <GoodsPayItem :itemData="item" />
              </template>
            </div>
            <div class="photo-list-right">
              <template v-for="item in goodsListRight" :key="item.id">
                <GoodsPayItem :itemData="item" />
              </template>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import Activivty from "@/components/activityItem/index.vue";
import GoodsPayItem from "@/components/goodsPayItem/index.vue";
import icon_hand3 from "@/assets/image/icon_hand3.png";

import { AnchorDynamicList } from "@/api/index.js";
import { GetGoodsList } from "@/api/index.js";

const route = useRoute();

const state = reactive({
  icon_hand3,
  tabsList: [
    {
      id: 1,
      name: "动态",
    },
    {
      id: 0,
      name: "赞助",
    },
    {
      id: 2,
      name: "原味",
    },
  ],
  page: 1,
  size: 8,
  total: 0,
});

const { tabsList, labelsColor } = toRefs(state);

let active = ref(0);
active.value = Number(localStorage.getItem("activity"));
const OnTabsChange = (ev) => {
  if (ev == active.value) return;
  localStorage.setItem("activity", ev);
  state.page = 1;
  dynamicData.value = [];
  active.value = ev;
  getPageList();
};

const getPageList = () => {
  if (active.value != 2) {
    GetAnchorDynamicList();
  } else {
    GetGoodsListData();
  }
};

const goodsListLeft = computed(() =>
  dynamicData.value.filter((o, i) => i % 2 == 0)
);
const goodsListRight = computed(() =>
  dynamicData.value.filter((o, i) => i % 2 == 1)
);

let loading = ref(false);
let finished = ref(false);
let dynamicData = ref([]);
const GetAnchorDynamicList = async () => {
  let { page, size } = state;
  let params = {
    page,
    size,
    source: active.value,
  };
  loading.value = true;
  try {
    let { data } = await AnchorDynamicList(params);
    dynamicData.value = dynamicData.value.concat(data.list);
    state.total = data.pagination.total;
    loading.value = false;
    if (dynamicData.value.length == data.pagination.total) {
      finished.value = true;
      loading.value = false;
    }
  } catch (error) {
    loading.value = false;
    finished.value = true;
  }
};

// 获取商品列表
const GetGoodsListData = async () => {
  let { page, size } = state;
  let params = {
    page,
    size,
    source: active.value,
  };
  loading.value = true;
  try {
    let { data } = await GetGoodsList(params);
    dynamicData.value = dynamicData.value.concat(data.list);
    state.total = data.pagination.total;
    loading.value = false;
    if (dynamicData.value.length == data.pagination.total) {
      finished.value = true;
      loading.value = false;
    }
  } catch (error) {
    loading.value = false;
    finished.value = true;
  }
};

// 解锁成功
const UnlockSuccess = (ev, index) => {
  dynamicData.value[index].dynamicImages = ev;
  dynamicData.value[index].isBy = true;
};

const onLoad = () => {
  if (dynamicData.value.length < state.total && state.total != 0) {
    state.page++;
    GetAnchorDynamicList();
  }
};

onMounted(() => {
  getPageList();
});
</script>



<style lang="scss" scoped>
.header-box {
  display: flex;
}
.sponsor-main {
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.photo-list {
  display: flex;

  .photo-list-left,
  .photo-list-right {
    width: calc(50% - 5px);
  }
}
</style>
